<!--
*@Author: zt
*@Description: 添加值班人员
*@Date: 2024-08-27
-->
<template>
  <u-dialog v-bind="$attrs" @submit="submit" @close="dialogClose" :title="$attrs.title">
    <a-layout class="f-h-100 s-bg-white">
      <a-layout-content style="overflow: hidden">
        <a-row :gutter="60" class="f-h-100">
          <a-col :span="24">
            <u-busi-card title="基本信息">
              <u-form :elements="formEls" :model="form" :gutter="0" ref="formRef">
              </u-form>
            </u-busi-card>
          </a-col>
        </a-row>
      </a-layout-content>
    </a-layout>
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, watch, useAttrs, readonly } from 'vue'
import { alertC, messageC, numberC } from '@/util/common';
import { cloneDeep } from "lodash";
import * as navigationApi from '@/service/navigation/index'
const attrs = useAttrs()
const emits = defineEmits(["success", 'close']);
const formRef = ref<FormInstance>()
let form = ref<any>({

})
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '90px',
  colon: false
}

let formEls: Array<_IFormEl> = [
  {
    label: '导航名称', key: 'name', col: { span: 12 }, element: 'input',
    formItemProps: { ...formItemProps, required: true },
  },
  {
    label: '导航地址', key: 'url', col: { span: 12, }, element: 'input',
    formItemProps: { ...formItemProps, required: true },
  },
  // {
  //   label: '导航内容', key: 'content', col: { span: 24 }, element: 'input',
  //   formItemProps: { ...formItemProps }
  // },
  {
    label: '图标', key: 'appendixSaveVOList', col: { span: 24 }, element: 'file',
    formItemProps: { ...formItemProps, required: true },
    componentProps: {
      fileParams: { biztype: '3', bucket: 'EMERGENCY_BIZ_TYPE' }
    },
  },
]

watch(() => form.value.appendixSaveVOList, (nval, oval) => {
  setTimeout(() => {
    formRef.value.form.validateFields(['appendixSaveVOList'])
  }, 100)
}, { deep: true })


// 保存提交
const submit = async () => {
  try {
    await formRef.value.form.validate()
  } catch (error) {
    alertC("请现将表单信息填写完毕！");
    return
  }
  const url = attrs.keyid ? 'updata' : 'add'
  const res = await navigationApi[url](form.value)
  if (res.code == 0) {
    alertC(res.msg, 'success')
    emits('success')
    dialogClose()
  } else {
    alertC(res.msg, 'warning')
  }
}
// 关闭
const dialogClose = () => {
  form.value = {}
  emits('close')
}

//获取回显数据
const getHX = async () => {
  const res = await navigationApi.query(attrs.keyid)
  if (res.code == 0) {
    for (let key in res.data) {
      form.value[key] = res.data[key]
    }
    form.value['appendixSaveVOList'] = res.data.attachList
  }
}


watch(() => attrs.open, async (val, nav) => {
  if (val) {
    if (attrs.keyid != '') {
      await getHX()
    }
  }
})

</script>

<style lang='scss' scoped>
.u-name-box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  text-align: center;
  line-height: 80px;
  background: linear-gradient(348deg, #1890FF 0%, #DBEDFE 100%);
  font-size: var(--font-size-level-1);
  color: #fff
}

.u-span-name {
  font-weight: 400;
  font-size: var(--font-size-level-2);
  color: #1890FF;
}

.u-span-value {
  font-weight: 400;
  font-size: var(--font-size-level-1);
  color: #666666;
}
</style>